<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>科目管理</BreadcrumbItem>
    </Breadcrumb>
    <Button type="success" style="margin: 30px 30px 20px 0" @click="addModal = true">添加</Button>
    <Table row-key="id" :columns="columns" :data="data" border></Table>
    <Modal
      v-model="modalShow"
      :title="addModal ? '添加用户' : editModal ? '修改用户' : '' + '灵异用户'"
      cancel-text="取消"
      class-name="center-modal"
      @on-visible-change="modalChange">
      <Form :model="form" :label-width="80" ref="modalForm" :rules="rules">
        <FormItem label="科目名" prop="name">
          <Input v-model="form.name" placeholder="请输入科目名"/>
        </FormItem>
        <FormItem label="父级" prop="parentName">
          <input v-model="form.parentName" placeholder="请点击选择父级" readonly @click="parentTreeClick" class="ivu-input ivu-input-default"/>
          <input v-model="form.parentId" type="hidden"/>
        </FormItem>
        <FormItem label="科目排序" prop="sort">
          <Input v-model="form.sort" placeholder="请输入科目排序"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="submit">{{ addModal ? '添加' : editModal ? '修改' : '' + '灵异' }}</Button>
      </div>
    </Modal>
    <Modal
      v-model="parentTree"
      title="树形菜单"
      cancel-text="取消"
      class-name="center-modal"
      :z-index="99999"
      @on-cancel="parentTree = false">
      <Tree :data="treeData" @on-select-change="selectChange"></Tree>
      <div slot="footer">
        <Button type="primary" size="large" @click="parentTreeOkClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'Subject',
  data: function () {
    return {
      form: {},
      parentTree: false,
      columns: [
        {
          title: '菜单名',
          key: 'name',
          width: '180px',
          align: 'center',
          tree: true
        },
        {
          title: '父级菜单',
          key: 'parentName',
          width: '100px',
          align: 'center'
        },
        {
          title: '深度',
          align: 'center',
          key: 'deep'
        },
        {
          title: '排序',
          align: 'center',
          key: 'sort'
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: '170px',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: '200px',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.form.parentName = params.row.name
                    this.form.parentId = params.row.id
                    this.form.deep = params.row.deep + 1
                    this.addModal = true
                  }
                }
              }, '添加'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    console.log(params.row)
                    this.form = { ...params.row }
                    this.editModal = true
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '删除提示',
                      content: '是否确认删除?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        this.$http.delete(`subjects?id=${params.row.id}`).then(res => {
                          if (res.code === 200) {
                            this.getData()
                            this.$Message.success(res.msg)
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [],
      treeData: [],
      addModal: false,
      editModal: false,
      iconViewShow: false,
      parentData: {},
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '科目名不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 30,
            message: '科目名长度在1-30位之间',
            trigger: 'blur'
          }
        ],
        parentName: [
          {
            required: true,
            type: 'string',
            message: '父级菜单不能为空',
            trigger: 'change'
          }
        ],
        sort: [
          {
            pattern: /^[\d]+$/,
            message: '请输入正确的数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    modalShow: {
      get () {
        return this.addModal || this.editModal
      },
      set () {
        this.addModal = this.editModal = false
      }
    }
  },
  methods: {
    getData () {
      this.$http.get('subject/get').then(res => {
        this.data = res.data.tree
      })
      this.$http.get('subject/tree').then(res => {
        this.treeData = res.data.tree
      })
    },
    modalChange (v) {
      if (!v) {
        this.$refs.modalForm.resetFields()
        this.form = {}
      }
    },
    parentTreeClick () {
      this.parentTree = true
    },
    parentTreeOkClick () {
      this.form.parentId = this.parentData.id
      this.form.parentName = this.parentData.name
      this.form.deep = this.parentData.deep + 1
      this.parentTree = false
    },
    selectChange (arr, obj) {
      this.parentData.name = obj.name
      this.parentData.id = obj.id
      this.parentData.deep = obj.deep
    },
    iconClick (v) {
      this.form.icon = v
      this.iconViewShow = false
    },
    iconViewClick () {
      this.iconViewShow = true
    },
    submit () {
      this.$refs.modalForm.validate((v) => {
        if (v) {
          if (this.addModal) {
            this.$http.post('subjects', this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.addModal = false
              }
            })
          }
          if (this.editModal) {
            this.$http.put('subjects', this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.editModal = false
              }
            })
          }
        }
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
</style>
